﻿@{
    ViewData["Title"] = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>餐饮列表</h1>

@* 名称查询 *@
<div class="layui-form-item">
    <label class="layui-form-label">标签名称</label>
    <div class="layui-input-inline">
        <input type="text" id="dishesName" placeholder="请输入名称" autocomplete="off" class="layui-input">

    </div>
    <button class="layui-btn" lay-submit lay-filter="demoTable" lay-event="myBtn">查询</button>
    <button class="layui-btn" id="add">添加</button>
    <div>
    </div>

</div>
@* 显示商品标签 *@
<table class="layui-table" id="demoTable" lay-filter="demoTable">
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
<div id="demo-laypage-all"></div>


@* 商户标签操作列 *@
<script type="text/html" id="bardemo">
    <a class="layui-btn layui-btn-xs layui-btn-action"   lay-event="yourFunction">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-action" lay-event="deleteNumber">删除</a>
</script>
<div id="demo-laypage-layout-1"></div>


@* 标签弹出层 *@
<div id="roomTypeAdd" style="display:none">
    <form class="layui-form">
        <div class="layui-form-item" style="display:none">

            <label class="layui-form-label"><span style="color:red">*</span>商品标签id</label>
            <div class="layui-input-block">
                <input type="text" name="dishesId" id="dishesId" placeholder="id">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">商户名称</label>
            <div class="layui-input-block">
                <input type="text" name="dishesName" id="dishesName" placeholder="" lay-reqtext="名称" autocomplete="off" class="layui-input">
            </div>
        </div>

         <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-btn-container">

                <button type="button" class="layui-btn layui-btn-normal" id="dishesPic">选择文件</button>
                <button type="button" class="layui-btn" id="dishesPic">开始上传</button>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">菜品介绍</label>
            <div class="layui-input-block">
                <textarea name="dishesDes" id="dishesDes" lay-verify="required" placeholder="介绍" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价钱</label>
            <div class="layui-input-block">
                <input type="text" name="dishesPrice" id="dishesPrice" lay-verify="required" placeholder="" lay-reqtext="价钱" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" name="stockCount" id="stockCount" lay-verify="required" placeholder="" lay-reqtext="库存" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">口味</label>
            <div class="layui-input-block">
                <input type="text" name="tasteName" id="tasteName" lay-verify="required" placeholder="" lay-reqtext="口味" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分组</label>
            <div class="layui-input-block">
                <input type="text" name="dishesGroupId" id="dishesGroupId" lay-verify="required" placeholder="" lay-reqtext="分组" autocomplete="off" class="layui-input">
            </div
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">规格</label>
            <div class="layui-input-block">
                <input type="text" name="dishesSpecsId" id="dishesSpecsId" lay-veri-fy="required" placeholder="" lay-reqtext="规格" autocomplete="off" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button class="layui-btn" lay-submit lay-filter="submitForm">确认</button>
                <button class="layui-btn" lay-submit lay-filter="xiuForm">修改</button>
            </div>
        </div>

    </form>
</div>

<THML>
    <body>
        <script >
              function getSelectedIds() {
            var checkstatus = layui.table.checkstatus('demoTable');
            if (checkstatus.data.length > 0) {
                var idsArray = [];
                for (var i = 0; i < checkstatus.data.length; i++) {
                    idsArray.push(checkstatus.data[i].dishesId);
                }
                var ids = idsArray.toString();
                aler(ids);
            }
            else {

                alert("请至少选着一个");
            }
        }

            layui.use(['table', 'layer', 'form', 'laydate','jquery','element','laypage','util'], function () {
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var laydate = layui.laydate;
                var $ = layui.jquery;
                var element = layui.element;
                var util = layui.util;
                var laypage = layui.laypage;


                $(function () {
                    Show();
                })

                var from = {

                   
                    dishesName: "",
                   
                }
                    //显示
                function Show() {
                    $.ajax({
                        url: "http://localhost:5174/api/Catering/GetDishes",
                        type: 'post',
                        data: JSON.stringify(from),
                        contentType: "application/json",
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem("token")
                        },
                        async: true,
                        success: res => {
                           
                            console.log(res.data);
                            table.render({
                                elem: '#demoTable',
                                data: res.data,
                                cols: [[
                                    { field: 'ck', type: 'checkbox', },
                                    { field: 'dishesId', title: 'ID', width: 80 },
                                    { field: 'dishesName', title: '名称', width: 120 },
                                    { field: 'dishesPrice', title: '价格', width: 100 },
                                    { field: 'stockCount', title: '库存', width: 100 },
                                     {
      field: 'dishesPic',  // 图片对应的字段名
      title: '图片',
      templet: function(d) {
        if (d.dishesPic) {
          // 假设图片路径存储在数据的 imageField 字段中
          return '<img src="' + d.dishesPic +'" width="100px" height="150px" />'; 
        } else {
          // 如果没有图片路径，可返回默认图片或其他提示信息
          return '<img src="OIP-C(20).jpg" width="100px" height="150px" />'; 
        }
      }
    },
                                     { toolbar: '#bardemo', title: '操作' },
                                ]]


                            });


                        },
                        error: function (res) {
                            console.log(res);
                        } 
                    })

                }

                  //查询
                $(document).on('click','[lay-event="myBtn"]', function () {

                    from.dishesName = $('#dishesName').val();

                    Show();

                });





                var selectedValues = [];
                form.on('checkbox(ck)', function (data) {
                    var isChecked = data.elem.checked;

                    console.log('选中的值:', data.elem.checked);
                    var checkboxes = document.querySelectorAll('#dataTable tbody input[type="checkbox"]');
                    checkboxes.forEach(function (checkbox) {
                        checkbox.checked = isChecked;
                        if (checkbox.checked) {
                            selectedValues.push(checkbox.value.goodLableId);
                        }
                    });
                    console.log('选中的值:', data.elem.checked);
                });




                $(".layui-btn").click(function () {
                    var id = $(this).attr('id');
                    if (id === "add") {
                        layer.open({
                            type: 1,
                            area: ['630px', '360px'],
                            shade: false, // 不显示遮罩
                            content: $('#roomTypeAdd'), // 捕获的元素
                            end: function () {
                                // layer.msg('关闭后的回调', {icon:6});
                            }
                        });
                    }
                });


                //添加
                
                form.on('submit(submitForm)', function (data) {
                    console.log(JSON.stringify(data.field))
                    $.ajax({
                        url: 'http://localhost:5174/api/Catering/AddDishes',
                        type: 'post',
                        contentType: "application/json",
                        data: JSON.stringify(data.field),
                        headers: {
                            Authorization: "Bearer " + localStorage.getItem("token")
                        },
                        success: function (res) {
                            if (res.code > 0) {
                                layer.msg("添加成功");
                                Show();
                            }
                        }
                    });
                    return false;
                }); 


                  table.on('tool()', function (obj) {
                  var data = obj.data; // 获取当前行数demoTable据
                  var layEvent = obj.event; // 获取 lay-event 对应的值
            console.log(data)
            $.ajax({
                url: 'http://localhost:5174/api/Catering/UpdateDishes',  // 替换成实际的接口地址
                type: 'PUT',
                data: { id: data.DishesId },  // 传递的参数
                success: function (data) {          
                 
                    // 将数据填充到表单中
                    document.getElementById('DishesId').value = data.data.DishesId;
                    //$("#DishesId").val(data.data.DishesId);
                    $("#DishesName").val(data.data.DishesName);
                    $("#DishesPic").val(data.data.DishesPic);
                    $("#DishesDes").val(data.data.DishesDes);
                    $("#DishesPrice").val(data.data.DishesPrice);
                    $("#StockCount").val(data.data.StockCount);
                   
                  
                },
                error: function (xhr, status, error) {
                    console.log(error);
                    // 处理错误情况
                }

            });

                      if (obj.event === 'yourFunction') {
                          //编辑按钮的处理逻辑
                          //var roomid = obj.roomId
                          layer.open({
                              title: '编辑 - id:' + data.DishesId,
                              type: 1,
                              shade: false, // 不显示遮罩
                              area: ['80%', '80%'],
                              content: $('#roomTypeAdd'),
                              end: function () {
                                  // layer.msg('关闭后的回调', {icon:6});
                              }
                          });
                          //在这里进行编辑相关的操作，例如打开编辑模态框、发送编辑请求等
                          console.log('编辑按钮被点击，行数据为:', data);
                      }

                      else if (layEvent=='deleteNumber') {
                       
                          layer.confirm('确定删除吗？', function (index) {

                              var myArray = [];
                              myArray.push(obj.data.DishesId);
                              $.ajax({
                                  url: 'http://localhost:5174/api/Catering/DeleteDishes',
                                  type: 'delete',
                                  contentType: "application/json",
                                  data: JSON.stringify({DishesId: myArray}),
                                  headers: {
                                      Authorization: "Bearer " + localStorage.getItem("token")
                                  },
                                  success: function (res) {
                                      if (res.code > 0) {

                                          layer.msg("删除成功");
                                          Show();
                                      }
                                  }
                              });
                              layer.close(index);
                          });

 
                      }

                      form.on('submit(xiuForm)', function (data) {
                          console.log(JSON.stringify(data.field))
                          $.ajax({
                              url: 'http://localhost:5174/api/Catering/DeleteDishes',
                              type: 'delete',
                              contentType: "application/json",
                              data: JSON.stringify(data.field),
                              success: function (res) {
                                  if (res.code > 0) {

                                      layer.msg("修改成功");
                                      Show();
                                  }
                              }
                          });
                          return false;
                               
                          })
                      })
                 });

        </script>
    </body>
</THML>
